<template>
  <div class="relative isolate bg-white">
    <div class="mx-auto grid max-w-7xl grid-cols-1 lg:grid-cols-2">
      <div class="relative px-6 pb-20 pt-24 sm:pt-32 lg:static lg:px-8 lg:py-48">
        <div class="mx-auto max-w-xl lg:mx-0 lg:max-w-lg">
          <div class="absolute inset-y-0 left-0 -z-10 w-full overflow-hidden bg-gray-100 ring-1lg:w-1/2">
            <svg
              class="absolute inset-0 h-full w-full stroke-gray-200 [mask-image:radial-gradient(100%_100%_at_top_right,white,transparent)]"
              aria-hidden="true">
              <defs>
                <pattern id="83fd4e5a-9d52-42fc-97b6-718e5d7ee527" width="200" height="200" x="100%" y="-1"
                  patternUnits="userSpaceOnUse">
                  <path d="M130 200V.5M.5 .5H200" fill="none" />
                </pattern>
              </defs>
              <rect width="100%" height="100%" stroke-width="0" fill="white" />
              <svg x="100%" y="-1" class="overflow-visible fill-gray-50">
                <path d="M-470.5 0h201v201h-201Z" stroke-width="0" />
              </svg>
              <rect width="100%" height="100%" stroke-width="0" fill="url(#83fd4e5a-9d52-42fc-97b6-718e5d7ee527)" />
            </svg>
          </div>
          <h2 class="text-3xl font-bold tracking-tight text-gray-900">
            联系我们
          </h2>
          <p class="mt-6 text-lg leading-8 text-gray-600">
            最好的团队
          </p>
          <dl class="mt-10 space-y-4 text-base leading-7 text-gray-600">
            <div class="flex gap-x-4">
              <dt class="flex-none">
                <span class="sr-only">Address</span>
                <OfficeBuilding class="h-7 w-6 text-gray-400" aria-hidden="true" />
              </dt>
              <dd>{{ infos.address }}</dd>
            </div>
            <div class="flex gap-x-4">
              <dt class="flex-none">
                <span class="sr-only">Telephone</span>
                <Iphone class="h-7 w-6 text-gray-400" aria-hidden="true">
                </Iphone>
                <!-- <PhoneIcon/> -->
              </dt>
              <dd>
                <a class="hover:text-gray-900">{{ infos.phone }}</a>
              </dd>
            </div>
            <div class="flex gap-x-4">
              <dt class="flex-none">
                <span class="sr-only">Email</span>
                <Promotion class="h-7 w-6 text-gray-400" aria-hidden="true" />
              </dt>
              <dd>
                <a class="hover:text-gray-900">{{ infos.email }}</a>
              </dd>
            </div>
            <div class="maxsky" id="container"></div>
          </dl>
        </div>
      </div>
      <form action="#" method="POST" class="px-6 pb-24 pt-20 sm:pb-32 lg:px-8 lg:py-48">
        <div class="mx-auto max-w-xl lg:mr-0 lg:max-w-lg">
          <h2 class="text-3xl font-bold tracking-tight text-gray-900">
            联系方式
          </h2>
          <div class="grid grid-cols-1 gap-x-8 gap-y-6 sm:grid-cols-2" style="margin-top: 20px">
            <div v-for="item in infos.chatline" style="box-shadow:0 0 10px 0 rgba(128, 128, 128, 0.5);">
              <div style="width:100%;height: 50px;text-align: center;line-height:50px;">
                {{ item.name }}</div>
              <div style="width:100%;height:50px;text-align: center">{{ item.content }}</div>
              <div>

              </div>
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>
</template>

<script setup>
import { Iphone, OfficeBuilding, Promotion } from "@element-plus/icons-vue";
// import { OfficeBuilding, Promotion, PhoneIcon } from '@heroicons/vue/24/outline';
import { onMounted, ref } from 'vue';
import { getSettings } from '@/api/setting';
import AMapLoader from "@amap/amap-jsapi-loader";

let map = null;


const infos = ref({});
const posi = ref([]);
const mapkey = ref('');
onMounted(() => {
  StartIt();
});
const StartIt = () => {
  getSettings(['phone', 'address', 'email', 'chatline', 'company_coordinate', 'mapkey','name']).then((res) => {
    infos.value = res.data.data;
    infos.value.chatline = JSON.parse(res.data.data.chatline);
    infos.value.company_coordinate = JSON.parse(res.data.data.company_coordinate);
    posi.value = infos.value.company_coordinate;
    mapkey.value =infos.value.mapkey;
    console.log(posi.value);
    const markerContent = `<div class="custom-content-marker">
<div style="width:100px;height:30px;background-color:white;text-align:center;box-shadow:0 0 10px 0 rgba(128, 128, 128, 0.5)" >${infos.value.name}</div>
</div>`;
    AMapLoader.load({
      key: mapkey.value,
      version: "2.0",
      plugins: [],
    })
      .then((AMap) => {
        map = new AMap.Map("container", {
          viewMode: "3D", // 是否为3D地图模式
          zoom: 11, // 初始化地图级别
          center: posi.value, // 初始化地图中心点位置
        });
        const [long, lat] = posi.value;
        const position = new AMap.LngLat(long, lat);
        const marker = new AMap.Marker({
          position: position,
          content: markerContent, //将 html 传给 content
          offset: new AMap.Pixel(-13, -30), //以 icon 的 [center bottom] 为原点
        });
        map.add(marker);
      })
      .catch((e) => {
        console.log(e);
      });
  });
}

</script>
<style scoped>
@media screen and (max-width: 400px) {
  .maxsky {
    width: 330px;
    height: 300px;
    object-fit: cover;
  }
}

@media screen and (min-width: 700px) {
  .maxsky {
    width: 100%;
    height: 300px;
  }
}
</style>
